<template>
    <div class="headerView">
        <!-- <img src="../../assets/icon.png" alt=""> -->
        <span class="Tilte">Swagger</span>
        <a-space class="buttons" :size="12">
            <a-tooltip title="打开链接" color="#108ee9">
                <FolderOpenOutlined @click="OpenLine" />
            </a-tooltip>
            <a-tooltip title="刷新链接" color="#108ee9">
                <SyncOutlined :spin="refreshLoading" @click="refresh" />
            </a-tooltip>
            <!-- <a-tooltip title="下载代码" color="#108ee9">
                <DownloadOutlined />
            </a-tooltip> -->
            <a-tooltip title="全部收起" color="#108ee9">
                <MinusSquareOutlined @click="store.CloseAllTreeFolder" />
            </a-tooltip>
        </a-space>
    </div>
    <a-modal v-model:visible="OpenLinkStatus" :confirm-loading="OpenLinkLoading" title="打开 Swagger 链接" @cancel="cancel" @ok="OpenLinkHandle">
        <openLink ref="OpenLinkRef"></openLink>
    </a-modal>
</template>
<script setup>
import { FolderOpenOutlined, DownloadOutlined, MinusSquareOutlined, SyncOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import openLink from './openLink.vue'
import { Modal } from 'ant-design-vue'
import { useStore } from '../../libs/store'
const store = useStore()

const OpenLinkStatus = ref(false);
const OpenLinkRef = ref(null);
const OpenLinkLoading = ref(false);


const cancel = function () {
    if (OpenLinkLoading.value) {
        OpenLinkStatus.value = true;
    }
}

let SwaggerPathCache = null;

const OpenLine = () => {
    if (SwaggerPathCache) {
        Modal.confirm({
            title: '警告',
            content: '打开新链接会刷新当前保存的数据，是否继续？',
            onOk: () => {
                OpenLinkStatus.value = true
            }
        })
    } else {
        OpenLinkStatus.value = true
    };
}

OpenLine();

const OpenLinkHandle = function () {
    OpenLinkLoading.value = true;
    OpenLinkRef.value.getValue((error, val) => {
        if (error) {
            OpenLinkLoading.value = false;
        } else {
            store.getData(val).then(res => {
                if (res) {
                    SwaggerPathCache = val;
                    OpenLinkLoading.value = false;
                    OpenLinkStatus.value = false;
                }
            });
        }
    })
}
const refreshLoading = ref(false);
const refresh = function () {
    if (SwaggerPathCache && !refreshLoading.value) {
        Modal.confirm({
            title: '警告',
            content: '刷新链接会刷新当前保存的数据，是否继续？',
            onOk: () => {
                refreshLoading.value = true;
                store.getData(SwaggerPathCache).then(res => {
                    if (res) {
                        setTimeout(() => {
                            refreshLoading.value = false;
                        }, 1000)
                    }
                });
            }
        });
    }
}

</script>
<style scoped>
.headerView {
    user-select: none;
    padding: 0px 10px;
    border-bottom: 1px solid var(--main-BC);
}
.headerView img {
    width: 40px;
    display: block;
    border-radius: 3px;
    float: left;
}
.buttons {
    color: var(--main-FC);
    float: right;
    padding: 10px 0 0 0;
    font-size: 16px;
}

:deep(.ant-space-item) {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}
:deep(.ant-space-item:hover) {
    opacity: 1;
}
.Tilte {
    color: var(--main-FC);
    font-size: 16px;
    vertical-align: middle;
    display: inline-block;
    line-height: 40px;
    padding-left: 5px;
    height: 40px;
}
</style>